<template>
  <div>
    <h1>app</h1>
    <div class="wrap">
      <!-- 添加数据的组件 -->
      <Add @addItem="addItem"></Add>
      <!-- 渲染数据的组件 -->
      <show-item :arr="arr" @getIndex="getIndex"></show-item>
      <p>数组长度：{{ arr.length }}</p>
    </div>
  </div>
</template>

<script>
import Add from "./components/Add";
import ShowItem from "./components/ShowItem.vue";
export default {
  name: "",
  props: [""],
  data() {
    return {
      arr: ["吃饭", "睡觉", "打豆豆"],
    };
  },

  components: {
    Add,
    ShowItem,
  },

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    addItem(item) {
      // 将item添加到数组中
      this.arr.push(item);
      console.log(this.arr);
    },
    getIndex(index) {
      // 得到对应的index 进行删除操作
      console.log("app index");
      console.log(index);
      this.arr.splice(index, 1);
    },
  },

  watch: {},
};

/* 
组件拆分的规则：
1.拆分组件按照位置去拆分
2.实现静态组件
3.实现动态组件


数据放到哪里？
哪个组件用，数据放到哪个组件中，哪些组件用，数据放到他们共同的父级上
数据在哪里，操作数据的增删改查 就在哪里


添加
 push 需要添加的item  add组件将收集到的item传递给App组件  子传父 $emit

删除
  app 找到对应的元素进行删除 splice(下标，1)
  下标在子组件showItem中
  APP父组件中进行删除
  将子组件中的index传递给父组件  子传父  $emit


*/
</script>
<style lang='css' scoped>
.wrap {
  width: 500px;
  height: 300px;
  border: 1px solid black;
}
</style>
